import React, { useEffect, useState } from "react";
import style from "./MatchCard.module.scss";
import Card from "../../../Components/Card/Card.tsx";

import { getMatchInfo } from "../../../API/getMatchInfo.ts";
import MatchItem from "./MatchItem/MatchItem.tsx";

import { IMatchItem } from "../../../interface/Match.ts";
import { Pagination, PaginationProps, Select } from "antd";
import MatchDetail from "./MatchDetail/MatchDetail.tsx";
interface MatchProps {
  puuid: string;
}
const MatchCard: React.FC<MatchProps> = (props: MatchProps) => {
  const [begIndex, setBegIndex] = useState(0);
  const [endIndex, setEndIndex] = useState(9);
  const [match, setMatch] = useState([] as IMatchItem[]);
  const [gameId, setGameId] = useState("");
  const handleChange = () => {};
  useEffect(() => {
    if (props.puuid !== undefined) {
      getMatchInfo(props.puuid, begIndex, endIndex).then((res) => {
        setMatch(res);
        // 默认选择第一个
        setGameId(res[0].gameId);
      });
    }
  }, [props, begIndex, endIndex]);
  const gameIdChange = (gameId: string) => {
    setGameId(gameId);
  };
  const onChange: PaginationProps["onChange"] = (pageNumber) => {
    const newBegIndex = (pageNumber - 1) * 10;
    setBegIndex(newBegIndex);
    setEndIndex(newBegIndex + 9);
  };

  return (
    <div>
      <Card style={{ backgroundColor: "#F4F4F4" }}>
        <div className={style.Match}>
          <div>
            <div className={style.modelChange}>
              <Select
                defaultValue="jack"
                style={{ width: "200rem" }}
                onChange={handleChange}
                options={[
                  { value: "jack", label: "全部模式" },
                  { value: "lucy", label: "单双排位" },
                  { value: "lucy1", label: "灵活排位" },
                  { value: "Yiminghe", label: "极地乱斗" },
                  { value: "disabled", label: "匹配模式" },
                ]}
              />
            </div>
            <div className={style.MatchItemList}>
              {match.map((item) => {
                return (
                  <MatchItem
                    matchItem={item}
                    key={item.gameId}
                    selected={gameId === item.gameId}
                    onClick={() => gameIdChange(item.gameId)}
                  ></MatchItem>
                );
              })}
            </div>
          </div>
          <MatchDetail gameId={gameId}></MatchDetail>
        </div>
        <div className={style.Pagination}>
          <Pagination
            defaultCurrent={begIndex + 1}
            total={200}
            showQuickJumper
            onChange={onChange}
          />
        </div>
      </Card>
    </div>
  );
};

export default MatchCard;
